<template>
  <div>
    <div class="shop_header">
      <Header></Header>
      <Marquee />
    </div>
    <div class="shop_box">
      <ul class="shop_flex">
        类型：
        <li class="shop_flex_tag" @click="toType">全部类型</li>
        <li class="shop_flex_tag" @click="toType">演出</li>
        <li class="shop_flex_tag" @click="toType">餐饮</li>
        <li class="shop_flex_tag" @click="toType">娱乐</li>
      </ul>
    </div>
    <div class="shop_bread">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/shop' }" @click="toFirst">全部类型</el-breadcrumb-item>
        <el-breadcrumb-item v-if="type === '演出'">演出</el-breadcrumb-item>
        <el-breadcrumb-item v-if="type === '娱乐'">娱乐</el-breadcrumb-item>
        <el-breadcrumb-item v-if="type === '餐饮'">餐饮</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="shop_box_project" style="width: 100%; background-color: rgb(244, 245, 247)">
      <div class="shop_project">
        <div v-for="(item, index) in shopDate" :key="index" @click="toShopDetails(item.placeid)">
          <ShopBox :item="item" />
        </div>
      </div>
    </div>
    <div class="block">
      <el-pagination layout="prev, pager, next" :total="shopTypeList.length" :page-size="pageSize"
        :current-page="currentPage" @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <GoTop />
    <Footer></Footer>
  </div>
</template>
<script>
import Header from "../../components/Header/index.vue";
import ShopBox from "../../components/ShopBox/index.vue";
import Footer from "../../components/Footer/index.vue";
import Marquee from "../../components/Marquee/index.vue";
import GoTop from "../../components/GoTop/index.vue";
import { nextTick } from "vue";
export default {
  name:"shop",
  components: {
    Header,
    ShopBox,
    Footer,
    Marquee,
    GoTop
  },
  data() {
    return {
      //总数据
      shopList: [],
      //渲染截取的数据
      shopTypeList: [],
      //一个页数数据
      pageSize: 6,
      //当前页数
      currentPage: sessionStorage.getItem('currentPage') ? Number(sessionStorage.getItem('currentPage')):1,
      //当前显示商品类型
    };
  },
  computed: {
    //每页展示的商家数据
    shopDate() {
      return this.shopTypeList.slice(
        (this.currentPage - 1) * 6,
        this.currentPage * 6
      );
    },
    type() {
      return this.$route.params.type;
    },
  },
  //利用路由守卫，监听类型切换
  beforeRouteUpdate(to, from, next) {
    this.shopTypeList = this.shopList;
    if (!to.params.type) {
      next();
      return;
    } else {
      this.shopTypeList = this.shopList.filter((item) => {
        return item.s_type === to.params.type;
      });
      this.currentPage = 1;
    }
    next();
  },
  methods: {
    toShopDetails(id) {
      this.$router.push("/shopdetails/" + id);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    //类型切换，类型切换时，页码变回第一页
    toType(e) {
      if (e.target.innerHTML === "全部类型") {
        this.$router.push("/shop");
      } else {
        this.$router.push("/shop/" + e.target.innerHTML);
      }
      this.currentPage = 1;
    },
    //类型切换时，页码变回第一页
    toFirst() {
      this.currentPage = 1;
    },
  },
  destroyed(){
    sessionStorage.setItem('currentPage',JSON.stringify(this.currentPage))
  }
  ,
  mounted() {
    //获取所有加盟的商家
    this.$store.state.allShop.forEach((item) => {
      if (item.isFull !== false && item.s_content !== "官方占用") {
        this.shopList.push(item);
      };
    });
    //符合查询类型的商家（全部类型）
    this.shopTypeList = this.shopList;
    //过滤筛选
    if (this.$route.params.type) {
      nextTick(() => {
        let set = this.shopTypeList.filter((item) => {
          return item.s_type === this.$route.params.type;
        });
        this.shopTypeList = Object.assign([], set);
      });
    };
  },
};
</script>
<style lang="scss" scoped>
$size: 1100px;

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.shop_header {
  width: 100%;
}

.shop_box {
  width: $size;
  margin: 0 auto;

  .shop_flex {
    display: flex;
    width: 100%;
    height: 40px;
    border-top: 1px dotted;
    border-bottom: 1px dotted;
    line-height: 40px;
    font-size: 13px;
    color: rgb(104, 102, 102);

    .shop_flex_tag {
      margin-left: 50px;
    }

    .shop_flex_tag:hover {
      color: rgb(232, 101, 138);
      cursor: pointer;
    }
  }
}

.shop_bread {
  width: $size;
  margin: 0 auto;
  border-bottom: 1px solid;
  height: 30px;
  margin-top: 10px;
  padding-top: 5px;
}

.block {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  // box-shadow: 5px 5px  5px rgb(189, 185, 185);
  background-color: rgb(244, 245, 247);
  height: 50px;
}

.shop_project {
  width: $size;
  margin: 0 auto;
  padding-top: 5px;
}

.shop_project {
  height: 880px;
}
</style>